<template>
  <div class="boke">
    <main class="animated bounceInRight">
      <div class="cent">博客</div>
      <img
        src="../../public/image/testimonial-bg.jpg"
        alt="玫瑰"
        width="1519px"
        class="lbt"
      />
    </main>
    <div class="container animated bounceInLeft">
      <div class="box">
        <div class="content">
          <div class="boke-left" v-for="(item, index) of arctile" :key="index">
            <img :src="item.image" alt="boke" width="415px" height="256px" />
            <div class="boke-nr">
              <h4>{{ item.bt }}</h4>
              <p class="boke-red">
                <span style="color: #000000; font-size: 13px">由</span
                >{{ item.group }}
              </p>
              <p class="boke-zz">{{ item.zz }}</p>
              <hr />
              <div class="boke-read">
                <router-link to="/">继续阅读</router-link>
                <span><i class="iconfont icon-duihaoqipao2"> </i>0</span>
              </div>
            </div>
          </div>
        </div>
        <div class="boke-right">
          <div class="boke-sous">
            <p>搜索</p>
            <input type="text" placeholder="搜素" />
            <div class="dw">
              <button><i class="iconfont tb icon-sousuo"></i></button>
            </div>
          </div>
          <div class="boke-fl">
            <p>分类目录</p>
            <div class="fl">
              <ul>
                <li v-for="(item, index) of fl" :key="index">
                  <p>{{ item.name }}</p>
                  <span>{{ item.count }}</span>
                </li>
              </ul>
            </div>
          </div>
          <div class="boke-fl">
            <p>最近贴文</p>
            <div class="fl">
              <ul>
                <li v-for="(item, index) of da" :key="index">
                  <p>{{ item.name }}</p>
                  <span>{{ item.count }}</span>
                </li>
              </ul>
            </div>
          </div>
          <div class="boke-tw">
            <p>最近贴文</p>
            <div class="fl">
              <div v-for="(item, index) of tw" :key="index">
                <div>
                 
                </div>
                <p>{{ item.data }}</p>
                <p>{{ item.bt }}</p>
              </div>
            </div>
          </div>
          <div class="boke-bq">
            <p>标签</p>
            <button v-for="(item, index) of bq" :key="index">{{ item }}</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
button,
input {
  outline: none;
  border: none;
  background: none;
}
ul,
li {
  list-style: none;
}
main {
  position: relative;
  .cent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #222222;
    font-size: 42px;
    font-family: "Lora", serif;
  }
}
.container {
  width: 1180px;
  height: 2000px;
  padding: 70px 0 100px 0;
  margin: 0 auto;
  display: flex;
  .box {
    display: flex;
    justify-content: space-between;

    .content {
      width: 75%;
      padding: 0 12px;
      display: flex;
      flex-wrap: wrap;
      color: #000000;
      .boke-left {
        width: 50%;
        height: 480px;
        padding: 12px;
        display: flex;
        flex-direction: column;
        .boke-nr {
          padding-top: 27px;
          h4 {
            color: #222222;
            font-size: 18px;
            font-family: "Rubik", sans-serif;
            line-height: 21px;
            margin-bottom: 5px;
            font-weight: 500;
            margin-bottom: 8px;
          }
          .boke-red {
            color: #f34f3f;
            margin-bottom: 22px;
            font-size: 13px;
          }
          .boke-zz {
            height: 46px;
            padding-bottom: 21px;
            font-size: 14px;
            font-weight: 400;
          }
          .boke-read {
            color: #222222;
            display: flex;
            justify-content: space-between;
            align-items: center;
            a {
              color: #222222;
            }
          }
        }
      }
    }
    .boke-right {
      width: 25%;
      height: 1500px;
      padding: 0 12px;
      color: #666666;
      .boke-sous {
        height: 91px;
        color: #222222;
        position: relative;
        p {
          padding: 10px;
          border-bottom: 1px solid #e1e1e1;
          margin-bottom: 20px;
        }
        input {
          width: 100%;
          height: 40px;
          border: 1px solid #e5e5e5;
          padding: 0px 15px;
          font-size: 14px;
          font-weight: 400;
        }
        .dw {
          position: relative;
          .tb {
            font-size: 22px;
          }
          button {
            position: absolute;
            top: -40px;
            right: 0;
            width: 40px;
            height: 40px;
            padding: 0;
            font-size: 18px;
            color: #666666;
            cursor: pointer;
          }
        }
      }
      .boke-fl {
        height: 211px;
        margin-top: 28px;
        .fl {
          li {
            display: flex;
            justify-content: space-between;
          }
        }
      }
      .boke-bq {
        button {
          height: 35px;
          padding: 0 15px;
          line-height: 33px;
          border: 1px solid #e1e1e1;
          text-align: center;
          font-size: 14px;
          border-radius: 3px;
          transition: all 0.3s linear;
        }
      }
    }
  }
}
</style>
<script>
// @ is an alias to /src
export default {
  data() {
    return {
      arctile: [
        {
          image: "picture/blog-01.jpg", //图片路径
          bt: "花之美", //标题
          group: "Shopify团队HasTheme / 2020年8月12日", //团队
          zz: "洛雷姆·伊普苏姆·多洛尔（Lerem ipsum dolor）", //数量
        },
        {
          image: "picture/blog-02.jpg", //图片路径
          bt: "花之美", //标题
          group: "Shopify团队HasTheme / 2020年8月12日", //团队
          zz: "洛雷姆·伊普苏姆·多洛尔（Lerem ipsum dolor）", //数量
        },
        {
          image: "picture/blog-03.jpg", //图片路径
          bt: "花之美", //标题
          group: "Shopify团队HasTheme / 2020年8月12日", //团队
          zz: "洛雷姆·伊普苏姆·多洛尔（Lerem ipsum dolor）", //数量
        },
        {
          image: "picture/blog-05.jpg", //图片路径
          bt: "花之美", //标题
          group: "Shopify团队HasTheme / 2020年8月12日", //团队
          zz: "洛雷姆·伊普苏姆·多洛尔（Lerem ipsum dolor）", //数量
        },
        {
          image: "picture/blog-07.jpg", //图片路径
          bt: "花之美", //标题
          group: "Shopify团队HasTheme / 2020年8月12日", //团队
          zz: "洛雷姆·伊普苏姆·多洛尔（Lerem ipsum dolor）", //数量
        },
        {
          image: "picture/blog-08.jpg", //图片路径
          bt: "花之美",
          group: "Shopify团队HasTheme / 2020年8月12日",
          zz: "洛雷姆·伊普苏姆·多洛尔（Lerem ipsum dolor）",
        },
        {
          image: "picture/blog-01.jpg",
          bt: "花之美",
          group: "Shopify团队HasTheme / 2020年8月12日",
          zz: "洛雷姆·伊普苏姆·多洛尔（Lerem ipsum dolor）",
        },
        {
          image: "picture/blog-02.jpg",
          bt: "花之美",
          group: "Shopify团队HasTheme / 2020年8月12日",
          zz: "洛雷姆·伊普苏姆·多洛尔（Lerem ipsum dolor）",
        },
      ],
      fl: [
        { name: "玫瑰", count: "10" },
        { name: "兰花", count: "10" },
        { name: "茉莉花", count: "10" },
        { name: "雏菊", count: "10" },
        { name: "百合", count: "10" },
      ],
      da: [
        { name: "一月", count: "10" },
        { name: "二月", count: "10" },
        { name: "旅游", count: "10" },
        { name: "四月", count: "10" },
        { name: "可能", count: "10" },
      ],
      tw: [
        { image: "picture/blog-07.jpg", data: "2020年8月12日", bt: "花之美" },
        { image: "picture/blog-08.jpg", data: "2020年8月12日", bt: "花之美" },
        { image: "picture/blog-09.jpg", data: "2020年8月12日", bt: "花之美" },
      ],
      bq: ["花束", "事件", "礼品", "喜悦", "爱", "特别", "成功", "节日"],
    };
  },
  methods: {
    jia() {},
    jian() {},
  },
};
</script>